<template>
  <div>
    <div class="topFiltrate ">
      <p :class="dateType == 1 ? 'activep' : ''" @click="changedate(1)">七天</p>
      <p :class="dateType == 2 ? 'activep' : ''" @click="changedate(2)">本月</p>
      <p :class="dateType == 4 ? 'activep' : ''" @click="changedate(4)">
        自定义
        <a-range-picker v-model="rangeDate" :format="dateFormatList" @change="ondateChange" />
      </p>
    </div>
    <div class="app-container ">
      <div class="sunNumBox bg">
        <span>
          领料数量
          <a>{{ allPick || 0 }}</a>
        </span>
        <span>
          产出数量
          <a class="outputnum">{{ allProduce || 0 }}</a>
        </span>
      </div>
      <div class="bg">
        <a-table
          :loading="Loading"
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
        >
          <a slot="day" slot-scope="text" class="colorin" style="font-weight: bold">{{ text }}</a>
          <a slot="shiftName" slot-scope="text" class="colorin" style="">{{ text }}</a>
          <a slot="pickCount" slot-scope="text" style="color: #289DF5;font-weight: bold">{{ text || '\\' }}</a>
          <a slot="produceCount" slot-scope="text" style="color: #3FC529;font-weight: bold">{{ text || '\\' }}</a>
          <a slot="wasterCount" slot-scope="text" style="color: #7F8FA4;font-weight: bold">{{ text || '\\' }}</a>
        </a-table>
        <div style="padding: 20px">
          <a-pagination size="small" :total="total" :show-total="(total) => `一共 ${total} 条`" @change="changepage" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//
const columns = [
  {
    title: '时间',
    dataIndex: 'day',
    scopedSlots: { customRender: 'day' },
  },

  {
    title: '班次',
    dataIndex: 'shiftName',
    scopedSlots: { customRender: 'shiftName' },
  },
  {
    title: '领料',
    dataIndex: 'pickCount',
    scopedSlots: { customRender: 'pickCount' },
  },
  {
    title: '产出',
    dataIndex: 'produceCount',
    scopedSlots: { customRender: 'produceCount' },
  },
  {
    title: '废件',
    dataIndex: 'wasterCount',
    scopedSlots: { customRender: 'wasterCount' },
  },
];

import api from '@/api/equipment';
import { timeCalculation, formatCurrentMonth, getDayAll, getYearAndMonth } from '@/unit/tool';

export default {
  data() {
    return {
      data: [],
      columns,
      form: { num: 1 },
      dateType: 1,
      Params: {
        pageSize: 10,
        pageNum: 1,
      },
      allProduce: '',
      allPick: '',
      total: 0,
      rangeDate: null,
      dateFormatList: ['YYYY-MM-DD', 'YYYY-MM-DD'],
      Loading: false,
    };
  },
  created() {
    let roleId = localStorage.getItem('roleId');
    if (roleId == 1) {
      this.Params.companyId = localStorage.getItem('compid');
    } else {
      this.Params.companyId = localStorage.getItem('choseCompanyId');
    }
    this.Params.UserName = localStorage.getItem('userName');
    this.Params.startTime = timeCalculation(new Date(), 'subtract', 7);
    this.Params.endTime = timeCalculation(new Date(), 'subtract', 0);
    this.getShiftByTime();
  },
  methods: {
    getShiftByTime() {
      this.Loading = true;
      api.getShiftByTime(this.Params).then((res) => {
        this.Loading = false;
        this.data = res.data.rows;
        this.total = res.data.total;
        this.allProduce = res.data.allProduce;
        this.allPick = res.data.allPick;
      });
    },
    changepage(page, size) {
      this.Params.pageNum = page;
      this.getShiftByTime();
    },
    ondateChange(dates, datestring) {
      this.Params.startTime = datestring[0];
      this.Params.endTime = datestring[1];
      this.getShiftByTime();
    },
    changedate(i) {
      this.dateType = i;
      switch (i) {
        case 1:
          // 最近7天
          this.Params.endTime = timeCalculation(new Date(), 'subtract', 1);
          this.Params.startTime = timeCalculation(new Date(), 'subtract', 7);
          this.getShiftByTime();
          break;
        case 2:
          // 本月
          this.Params.startTime = formatCurrentMonth('start', 0);
          this.Params.endTime = formatCurrentMonth('end', 0);
          this.getShiftByTime();
          break;
        case 4:
          // 自定义
          // break;
          return;
      }
      // this.getChartData()
    },
    handleSubmit() {},
  },
};
</script>

<style scoped lang="less">
@import 'index.less';
</style>
